import React from 'react';
import style from './style';
import { Link, Button } from '../../ui-components';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import {fetchSelfReviewList,fetchPeerReviewList} from '../../actions/review.action';
import PeriodsSelect from './PeriodsSelect';
import util from '../../util';
import moment from 'moment';
import ReviewHomeItem from '../review/new/admin/ReviewHomeItem';

@connect(({ app, review }) => ({ app, review }), dispatch => ({actions: bindActionCreators({fetchSelfReviewList,fetchPeerReviewList}, dispatch)}))
class ReviewBox extends React.Component {
  constructor(props) {
    super(props);
    this.displayName = 'ReviewBox';
    this.state = {
      selfFlag: false,
      peerFlag: false,
    }
  }
  componentDidMount() {
    this.props.actions.fetchSelfReviewList();
    this.props.actions.fetchPeerReviewList();
  }
  toggleList = (key) => {
    this.setState({
      [key]: !this.state[key]
    });
  }
  render() {
    const {
      selfTemplates = {},
      peerTemplates = {},
    } = this.props.review;
    const {
      reviewTemplates = [],
    } = selfTemplates;
    const {
      reviewTemplates: peerReviewTemplates = []
    } = peerTemplates;
    const {
      profile = {}
    } = this.props.app;
    const {
      reporterFullName
    } = profile;
    return (
      <div>
        {!reviewTemplates.length ? null : 
          <div className={style['review-list']}>
          {
            reviewTemplates.slice(0, this.state.selfFlag ? reviewTemplates.length : 1).map((v, i) => {
              const time = moment(+v.startTime).format('YYYY-MM-DD');
              return (
                <ReviewHomeItem item={v} key={i} />
              )
            })
          }
          {
            reviewTemplates.length > 1 ? 
            <div onClick={this.toggleList.bind(this, 'selfFlag')} className={style['review-link']}>{this.state.selfFlag ? '收起' : `展开全部${reviewTemplates.length}项...`}</div>
            : null
          }
          </div>
        }
          {!peerReviewTemplates.length ? null : 
            <div className={style['review-list']}>
              {
                peerReviewTemplates.slice(0, this.state.peerFlag ? peerReviewTemplates.length : 1).map((v, i) => {
                  const time = moment(+v.startTime).format('YYYY-MM-DD');
                    return (
                      <ReviewHomeItem peer item={v} key={i} />
                    )
                })
              }
              {
                peerReviewTemplates.length > 1 ? 
                <div onClick={this.toggleList.bind(this, 'peerFlag')} className={style['review-link']}>{this.state.peerFlag ? '收起' : `展开全部${peerReviewTemplates.length}项...`}</div>
                : null
              }
            </div>
          }
      </div>
    )
  }
}

export default ReviewBox;
